<template>
	<div id="chinaMap" ref="ChinaMap" style="width: 100%;height: 600px;"></div>
</template>

<script>
	import * as echarts from 'echarts';
	import chinaJson from '@/common/china.json';
	var myChart;
	export default {
		data() {
			return {
				
			};
		},
		onLoad() {
			console.log(777777);
			console.table(chinaJson)
		},
		components: {},
		mounted() {
			this.drawChina()
		},
		methods: {
			drawChina() {
				echarts.registerMap('china', chinaJson) //注册可用的地图
				myChart = echarts.init(this.$refs.ChinaMap);
				let option = {
					geo: {
						show: true,
						//设置中心点
						center: [105.194115019531, 35.582111640625],
						map: 'china',
						roam: true, //是否允许缩放，拖拽
						zoom: 1, //初始化大小
						//缩放大小限制
						scaleLimit: {
							min: 0.1, //最小
							max: 12, //最大
						},
						//各个省份模块样式设置
						itemStyle: {
							normal: {
								show: true,
								areaColor: '#3352c7', //背景色
								color: '#fff', //字体颜色
								borderColor: '#5e84fd',
								borderWidth: 1,
							},
						},
						//高亮状态
						emphasis: {
							itemStyle: {
								areaColor: '#ffc601',
							},
			 			label: {
								show: true,
								color: '#fff',
							},
						},
						// 显示层级
						z: 10,
					},
				}
				myChart.setOption(option)
				myChart.on("click", param => {
					console.log(param.name)
				    if (param.name in provinces) {
				      // 处理省模块
				      let names = param.name;
				      for (let key in provinces) {
				        if (names == key) {
				          showProvince(provinces[key], key);
				          break;
				        }
				      }
				
				    } else if (param.name in cityMap) {
				      // 处理市模块
				      let names = param.name;
				      for (let key in cityMap) {
				        if (names == key) {
				          showCitys(cityMap[key], key);
				          break;
				        }
				      }
				    }
				  });
				//展示对应的省
				function showProvince(eName,param) {
				  console.log(eName, param)
				  // $.getJSON(`/map/province/${eName}.json`, data=>{
				  //   that.$echarts.registerMap(param, data);
				  //   alert("省")
				  //   initEcharts(param);
				  // })
				}
				  
				  
				//展示对应市
				function showCitys(cName, param) {
				  console.log(cName, param)
				  // 显示县级地图
				  // $.getJSON(`/map/city/${cName}.json`, data=>{
				  //   that.$echarts.registerMap(param, data);
				  //   alert("县")
				  //   initEcharts(param);
				  // })
				}
			}
		}
	};
</script>
<style>
	.viewimg {
		height: 100%;
		/* background: #d1e9e9; */
	}
</style>
